<template>
  <!-- 当期警情 -->
  <page-container class="early-warning-list">
    <div class="query-box1">
      <a-tabs v-model:activeKey="activeKey" type="card" class="tabs-style" @change="tabsChange">
        <a-tab-pane :key="item.code" :tab="item.title" v-for="item in tabsList"></a-tab-pane>
      </a-tabs>
      <a-radio-group
        v-model:value="radioGroup"
        class="radio-group"
        button-style="solid"
        @change="typesChange"
      >
        <a-radio-button :value="item.code" :key="index" v-for="(item, index) in radioGroupList">
          {{ item.title }}
        </a-radio-button>
      </a-radio-group>
      <!-- <div class="methods-name-box">
        事件预警信息：
        <a-input-search
          v-model:value="methodsName"
          class="methods-name"
          @search="onSearch"
          placeholder="输入事件名称"
        />
      </div> -->
    </div>
    <!-- <div class="query-box2">
      状态：
      <a-select
        v-model:value="statusSelect"
        style="width: 300px; margin-right: 80px"
        @change="statusChange"
      >
        <a-select-option value="">全部</a-select-option>
        <a-select-option value="1">未下发</a-select-option>
        <a-select-option value="2">下发</a-select-option>
      </a-select>
      查询历史预警：
      <a-range-picker
        :locale="zhCN"
        :valueFormat="historyDateFormat"
        v-model:value="historyDate"
        :format="historyDateFormat"
        @change="dateChange"
      />
    </div> -->
    <supper-select @change="supperSelectChange" style="margin-bottom: 20px"></supper-select>

    <a-row :gutter="20">
      <a-col :span="6" class="col-style" v-for="(item, index) in warningTitleList" :key="index">
        <a-spin :spinning="spinning" :key="index">
          <div
            class="warn-title-box clearfix"
            @click="warnTitleClick(item)"
            :style="{
              background: item.backgroundColor,
              color: item.color,
              borderColor: item.active ? item.color : '',
            }"
          >
            <div class="warn-title-left" :style="{ 'border-color': item.colorPer }">
              <img class="icon-style" :src="item.path" />
              <span
                class="warn-count"
                :title="item.num"
                :style="{ fontSize: setFontSize(item.num) }"
              >
                {{ item.num }}
              </span>
              <span>{{ item.title }}</span>
            </div>
            <div class="warn-title-right">
              <ul class="warn-list">
                <li v-for="(data, dataInd) in item.top3" :key="dataInd">
                  <a href="javascript:;" class="type-style" :style="{ background: item.color }">
                    {{ setType(data.classifyType) }}
                  </a>
                  <span class="warn-name" :title="data.modelName">{{ data.modelName }}</span>
                </li>
                <!-- <a-empty v-if="!item.top3.length" /> -->
              </ul>
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>

    <!-- <div class="page-box">
      <a-row style="padding: 10px 0">
        <a-col :span="14" style="text-align: center">
          <a-pagination
            show-less-items
            show-quick-jumper
            show-size-changer
            v-model:current="page"
            v-model:pageSize="size"
            :total="total"
            :show-total="total => `共 ${total} 条预警信息`"
            @showSizeChange="onShowSizeChange"
            @change="onChange"
          />
        </a-col>
        <a-col :span="10" style="text-align: right">
          <a-button type="primary">
            <template #icon>
              <search-outlined />
            </template>
            推送至首长研判台
          </a-button>
          <a-button type="primary" style="margin: 0 10px">
            <template #icon>
              <search-outlined />
            </template>
            警种协同
          </a-button>
          <a-button type="primary" @click="xiafa">
            <template #icon>
              <search-outlined />
            </template>
            下发
          </a-button>
        </a-col>
      </a-row>
    </div> -->

    <a-card style="margin-top: 20px" size="small">共 {{ total }} 条预警信息</a-card>

    <!-- 数据列表 -->
    <!-- :row-selection="rowSelection" -->
    <a-table
      :columns="tableColumns"
      :data-source="tableData"
      :pagination="false"
      :loading="tableLoading"
      bordered
    >
      <template #info="{ record }">
        <div class="table-content">
          <div class="triangle" :class="tagType(record.classifyType)"></div>
          <div class="triangleText">
            {{ record.modelName }}
          </div>
          <div v-for="(item, index) in record.rule" :key="index" class="tags-box">
            规则{{ index + 1 }}：
            <span :title="item.xqdwCode" style="margin: 0 6px 0 0" v-if="item.xqdwCode.length">
              <span v-for="(o, ind) in item.xqdwCode" :key="ind" style="margin-right: 4px">
                {{ o }}
              </span>
            </span>
            <span v-else style="margin-right: 6px">全部辖区</span>
            <span
              :title="item.classifyCode"
              style="margin: 0 6px 0 0"
              v-if="item.classifyCode.length && item.classifyCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.classifyCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="item.callSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.callSummaryCode.length && item.callSummaryCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.callSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="item.dealSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.dealSummaryCode.length && item.dealSummaryCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.dealSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>
            <!-- <span style="margin: 0 6px 0 0" v-if="item.classifyCode.length">
              <m-tag
                :type="item.classifyType == '1' ? 'ai' : item.classifyType == '2' ? 'jq' : 'fk'"
              >
                {{ record.classifyName }}
              </m-tag>
            </span> -->
            <!-- 
            <span   
              :title="item.callSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.callSummaryCode.length"
            >
              <m-tag type="ai" v-for="(o, i) in item.callSummaryCode" :key="i">{{ o }}</m-tag>
            </span> -->

            <!-- <span
              :title="item.dealSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.dealSummaryCode.length"
            >
              <m-tag type="ai" v-for="(o, i) in item.dealSummaryCode" :key="i">{{ o }}</m-tag>
            </span> -->
            <!-- 
            类型的警情{{ setPeriod(item.period) }}当期发生{{ item.dqNum }}起， 去年同期发生{{
              item.tqNum
            }}起，{{ setZZType(item.type) }}上升{{ item.percent }}% -->
            <span v-if="item.type == 'T'">
              类型警情
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              <span style="color: #60b5ff">同比</span>

              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ `${item.percent}%` }}
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
              <span>，</span>
              <span style="color: #60b5ff">当期</span>
              <span>发生</span>
              <span style="color: #60b5ff">{{ item.dqNum }}</span>
              <span>起，</span>
              <span>去年</span>
              <span style="color: #60b5ff">同期</span>
              <span>发生</span>
              <span style="color: #60b5ff">{{ item.tqNum }}</span>
              <span>起</span>
            </span>
            <span v-if="item.type == 'H'">
              类型警情
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              <span style="color: #60b5ff">环比</span>
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ item.percent }}%
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
              <span>，</span>
              <span style="color: #60b5ff">当期</span>
              <span>发生</span>
              <span style="color: #60b5ff">{{ item.dqNum }}</span>
              <span>起，</span>
              <span style="color: #60b5ff">环比上期</span>
              <span>发生</span>
              <span style="color: #60b5ff">{{ item.tqNum }}</span>
              <span>起</span>
            </span>
            <span v-if="item.type == 'N'">
              类型警情
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              <span style="color: #60b5ff">当期</span>
              <span>发生</span>
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ item.dqNum }}
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
              起
            </span>
          </div>
        </div>
      </template>
      <template #yjLevel="{ record }">
        <p :style="{ color: warnLevelColor(record) }" class="level-style" style="margin: 0">
          <img :src="record.path" alt="" />
          <span>{{ record.levelText }}</span>
        </p>
      </template>
      <template #xqdwName="{ record }">
        <div class="table-item-xqdw">
          <a href="javascript:;" class="blue-border">
            {{ record.xqdwName ? record.xqdwName : '无' }}
          </a>
        </div>
      </template>
      <template #subsetXqdwName="{ record }">
        <div :title="record.subsetXqdwName" class="table-item-xqdw">
          <a
            href="javascript:;"
            class="blue-border"
            v-for="(item, index) in record.subsetXqdwName"
            :key="index"
          >
            {{ item ? item : '无' }}
          </a>
        </div>
      </template>
      <template #state="{ record }">
        <div class="status-box">
          <i
            class="solid-circle"
            :style="{ background: record.state === '1' ? '#FF1B3F' : '#1CDAFF' }"
          ></i>
          {{ record.state === '1' ? '未下发' : '已下发' }}
        </div>
      </template>
      <template #option="{ record }">
        <div class="btns-box">
          <a-button type="primary" size="small" @click="handleDetail(record)">详情</a-button>
          <!-- <a-button type="primary" size="small" @click="changeState(0, record.modelId)">
            忽略
          </a-button>
          <br />
          <a-button type="primary" size="small" @click="changeState(2, record.modelId)">
            下发
          </a-button>
          <a-button type="primary" size="small">监测</a-button> -->
        </div>
      </template>
    </a-table>
    <a-card style="text-align: center" size="small">
      <a-pagination
        show-less-items
        show-quick-jumper
        show-size-changer
        v-model:current="page"
        v-model:pageSize="size"
        :total="total"
        @showSizeChange="onShowSizeChange"
        @change="onChange"
      />
    </a-card>
  </page-container>
</template>

<script lang="ts">
import { TreeSelect, message } from 'ant-design-vue';
// import { SearchOutlined } from '@ant-design/icons-vue';
import moment, { Moment } from 'moment';
import { defineComponent, ref, onMounted, toRaw } from 'vue';
import YJ_RED from '@/assets/yujing-red.png';
import YJ_ORANGE from '@/assets/yujing-orange.png';
import YJ_YELLOW from '@/assets/yujing-yellow.png';
import YJ_BLUE from '@/assets/yujing-blue.png';
import yj_red from '@/assets/yj-red.png';
import yj_orange from '@/assets/yj-orange.png';
import yj_yellow from '@/assets/yj-yellow.png';
import yj_blue from '@/assets/yj-blue.png';
import { ColumnProps } from 'ant-design-vue/es/table/interface';
import {
  queryCurFourColourTop3,
  queryYjCurResultList,
  updateYjState,
} from '@/api/magic-cube/four-color';
import SupperSelect from '@/components/supper-select/index.vue';
import { getParamsCodes } from '@/components/supper-select/index.js';
import MTag from '@/components/m-tag/index.vue';
import { useRouter } from 'vue-router';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import 'moment/dist/locale/zh-cn';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
type Key = ColumnProps['key'];
export default defineComponent({
  name: 'fourColorWarning',
  components: {
    SupperSelect,
    MTag,
  },
  setup() {
    const router = useRouter();
    let tableData = ref([]);
    const historyDate = ref<Moment[]>([]);
    const historyDateFormat = 'YYYY-MM-DD HH:mm:ss';
    const tableLoading = ref<boolean>(false);
    const spinning = ref<boolean>(false);
    const tableColumns = [
      {
        title: '事件预警信息',
        key: 'info',
        slots: { customRender: 'info' },
      },
      {
        title: '预警等级',
        key: 'yjLevel',
        width: 120,
        align: 'center',
        slots: { customRender: 'yjLevel' },
      },
      {
        title: '预警辖区',
        key: 'xqdwName',
        width: 120,
        align: 'center',
        slots: { customRender: 'xqdwName' },
      },
      //   {
      //     title: '下属高发辖区',
      //     key: 'subsetXqdwName',
      //     width: 120,
      //     slots: { customRender: 'subsetXqdwName' },
      //   },
      {
        title: '预警时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        width: 100,
      },
      //   {
      //     title: '状态',
      //     key: 'state',
      //     width: 80,
      //     slots: { customRender: 'state' },
      //   },
      {
        title: '操作',
        key: 'option',
        align: 'center',
        width: 90,
        slots: { customRender: 'option' },
      },
    ];
    const tabsList = [
      {
        title: '全部',
        code: '',
      },
      {
        title: '日预警',
        code: 'D',
      },
      {
        title: '周预警',
        code: 'W',
      },
      {
        title: '月预警',
        code: 'M',
      },
    ];
    const warningTitleList = ref([
      //  顶部tiele数据及配置
      {
        backgroundColor: 'rgba(242, 43, 75, 0.3)', //  背景色
        color: '#FF2B4D', //  字体颜色
        colorPer: 'rgba(255, 27, 63, 0.19)', //  带透明度的字体颜色
        active: false, //  控制选中状态
        path: YJ_RED, //  icon路径
        level: '1', //  拿取数据
        num: 0, //  数量
        title: '红色预警', //  title
        top3: [
          {
            modelId: '',
            modelName: '-',
            modelType: '1',
            yjLevel: '1',
          },
        ], //  数据
      },
      {
        backgroundColor: 'rgba(255, 111, 28, 0.3)',
        color: '#FF6F1C',
        colorPer: 'rgba(255, 111, 28, 0.19)',
        active: false,
        path: YJ_ORANGE,
        level: '2',
        num: 0,
        title: '橙色预警',
        top3: [
          {
            modelId: '',
            modelName: '-',
            modelType: '1',
            yjLevel: '2',
          },
        ],
      },
      {
        backgroundColor: 'rgba(236, 214, 13, 0.3)',
        color: '#ECD60D',
        colorPer: 'rgba(236, 214, 13, 0.19)',
        active: false,
        path: YJ_YELLOW,
        level: '3',
        num: 0,
        title: '黄色预警',
        top3: [
          {
            modelId: '',
            modelName: '-',
            modelType: '1',
            yjLevel: '3',
          },
        ],
      },
      {
        backgroundColor: 'rgba(28, 218, 255, 0.3)',
        color: '#1CDAFF',
        colorPer: 'rgba(28, 218, 255, 0.19)',
        active: false,
        path: YJ_BLUE,
        level: '4',
        num: 0,
        title: '蓝色预警',
        top3: [
          {
            modelId: '',
            modelName: '-',
            modelType: '1',
            yjLevel: '4',
          },
        ],
      },
    ]);

    const radioGroupList = [
      {
        title: '全部',
        code: '',
      },
      {
        title: '同比',
        code: 'T',
      },
      {
        title: '环比',
        code: 'H',
      },
      {
        title: '警情量',
        code: 'N',
      },
    ];
    const activeKey = ref<string>('');
    const radioGroup = ref<string>('');
    //  分页数据总量值
    const size = ref(10);
    const page = ref(1);
    const total = ref<number>(0);
    const onShowSizeChange = (pageNumber: number, sizeNumber: number) => {
      page.value = 1;
      size.value = sizeNumber;
      resultList();
    };
    const onChange = (pageNumber: number) => {
      page.value = pageNumber;
      resultList();
    };

    const tabsChange = (active: string): void => {
      activeKey.value = active;
      update();
    };
    const typesChange = (e: any): void => {
      radioGroup.value = e.target.value;
      update();
    };
    const statusChange = (val: string): any => {
      statusSelect.value = val;
      update();
    };
    const onSearch = (searchValue: string) => {
      methodsName.value = searchValue;
      update();
    };
    const levelActive = ref<string>(''); //  预警等级切换
    //  顶部预警等级切换事件
    const warnTitleClick = (item: any) => {
      //  修改选中状态
      const { active } = item;
      warningTitleList.value.forEach(o => (o.active = false));
      item.active = !active;
      //  设置预警等级
      levelActive.value = item.active ? item.level : '';
      page.value = 1;
      resultList();
    };
    //  设置四色预警数量的字号
    const setFontSize = (count: number): string => {
      let _size;
      //  根据返回数量的位数判定显示字号
      const _length = (count + '').length;
      if (_length <= 3) {
        _size = 50;
      } else if (_length === 4) {
        _size = 53;
      } else if (_length === 5) {
        _size = 40;
      } else if (_length >= 6) {
        _size = 35;
      }
      return _size + 'px';
    };
    //  四色预警同比/环比/增量转换
    const compareTitle = (type: string): string => {
      return type === 'T' ? '同比' : type === 'H' ? '环比' : '增量';
    };
    //  table - 设置同期/环期
    const compare = (type: string): string => {
      return type === 'T' ? '同期' : type === 'H' ? '环期' : '近期';
    };
    //  方法 - 周期类型数据转换
    const setPeriod = (period: string): string => {
      let s = '';
      switch (period) {
        case 'D':
          s = '日';
          break;
        case 'W':
          s = '周';
          break;
        case 'M':
          s = '月';
          break;
      }
      return s;
    };
    //  方法 - 增长类型数据转换
    const setZZType = (type: string): string => {
      let t = '';
      switch (type) {
        case 'T':
          t = '同比';
          break;
        case 'H':
          t = '环比';
          break;
        case 'N':
          t = '数值';
          break;
      }
      return t;
    };
    //  table - 设置时间维度格式
    const timeCycle = (type: string): any => {
      let _cycle;
      switch (type) {
        case 'D':
          _cycle = '日';
          break;
        case 'W':
          _cycle = '周';
          break;
        case 'M':
          _cycle = '月';
          break;
        case 'J':
          _cycle = '近';
          break;
      }
      return _cycle;
    };
    //  table - 设置预警等级数据及颜色
    const warnLevelColor = (row: any): any => {
      let _color;
      switch (row.yjLevel) {
        case '1':
          _color = '#FF2B4D';
          row.levelText = '红色预警';
          row.path = yj_red;
          break;
        case '2':
          _color = '#FF6F1C';
          row.levelText = '橙色预警';
          row.path = yj_orange;
          break;
        case '3':
          _color = '#ECD60D';
          row.levelText = '黄色预警';
          row.path = yj_yellow;
          break;
        case '4':
          _color = '#1CDAFF';
          row.levelText = '蓝色预警';
          row.path = yj_blue;
          break;
      }
      return _color;
    };

    const tagType = (row: string): any => {
      const map = {
        1: 'tag-ai',
        2: 'tag-jj',
        3: 'tag-fk',
      };
      return map[row];
    };
    const rowKeys = ref<any>('');
    const rowSelection = {
      onChange: (selectedRowKeys: Key[]) => {
        rowKeys.value = selectedRowKeys;
      },
    };
    const xiafa = async () => {
      changeState(2, '', toRaw(rowKeys.value));
    };
    const setType = (type: any): any => {
      let t = '';
      switch (type) {
        case '1':
          t = 'AI';
          break;
        case '2':
          t = '接';
          break;
        case '3':
          t = '反';
          break;
      }
      return t;
    };
    const dateChange = val => {
      historyDate.value = val;
      update();
    };
    const update = () => {
      top3List();
      resultList();
    };
    const paramState = {
      classifyCodes: '',
      callSummaryCodes: '',
      dealSummaryCodes: '',
      xqdwCodes: '',
    };

    const supperSelectChange = (codes: Array<string>) => {
      const { ai, jq, fk, xqdw } = getParamsCodes(codes);
      paramState.xqdwCodes = xqdw;
      paramState.classifyCodes = ai;
      paramState.callSummaryCodes = jq;
      paramState.dealSummaryCodes = fk;
      page.value = 1;
      update();
    };
    const methodsName = ref<string>('');
    const statusSelect = ref<string>('');
    const top3List = async () => {
      const time = historyDate.value;
      const params = {
        callTimeStart: time[0] || '', // | 开始时间 | N |
        callTimeEnd: time[1] || '', // | 结束时间 | N |
        period: activeKey.value, // | 周期类型 | N （日-D，周-W，月-M）|
        type: radioGroup.value, // | 增长类型 | N（T-同比，H-环比，N-数值） |
        classifyCodes: paramState.classifyCodes,
        xqdwCodes: paramState.xqdwCodes,
        callSummaryCodes: paramState.callSummaryCodes,
        dealSummaryCodes: paramState.dealSummaryCodes,
        state: toRaw(statusSelect.value), // | 状态 | N |
        modelName: toRaw(methodsName.value), // | 模型名称 | N |
      };
      spinning.value = true;
      const res = await queryCurFourColourTop3(params);
      spinning.value = false;
      if (res.code && res.code === 200) {
        const data = res.data;
        warningTitleList.value.forEach((item, index) => {
          if (item.level === data[index].yjLevel) {
            item.num = data[index].num;
            item.top3 = data[index].top3;
          }
        });
      }
    };
    const resultList = async () => {
      tableData.value = [];
      const params = {
        page: page.value,
        size: size.value,
        YjLevel: toRaw(levelActive.value),
        callTimeStart: historyDate.value[0] || '', // 开始时间
        callTimeEnd: historyDate.value[1] || '', // 结束时间
        period: activeKey.value, // 周期类型  （日-D，周-W，月-M）
        type: radioGroup.value, // 增长类型 （T-同比，H-环比，N-数值）
        classifyCodes: paramState.classifyCodes,
        xqdwCodes: paramState.xqdwCodes,
        callSummaryCodes: paramState.callSummaryCodes,
        dealSummaryCodes: paramState.dealSummaryCodes,
        state: toRaw(statusSelect.value), // 状态
        modelName: toRaw(methodsName.value), // 模型名称
      };
      tableLoading.value = true;
      const res = await queryYjCurResultList(params);
      tableLoading.value = false;

      if (res.code && res.code === 200) {
        total.value = res.data.count;
        res.data.details.forEach(item => {
          item.createTime = item.createTime.split(' ')[0];
          const rankInfo = JSON.parse(item.rankInfo || '{}');
          item.key = item.modelId;
          //   item.xqdwName = item.xqdwList; // 预警辖区
          item.subsetXqdwName = rankInfo.xqdwList?.slice(0, 3).map(o => o.name); // 下属高发辖区
          item.rule = item.rule.slice(0, 3).map(o => {
            o.callSummaryCode = o.callSummaryCode.filter(e => e);
            o.classifyCode = o.classifyCode.filter(e => e);
            o.dealSummaryCode = o.dealSummaryCode.filter(e => e);
            o.xqdwCode = o.xqdwCode.filter(e => e);
            return o;
          });
        });
        tableData.value = res.data.details;
        console.log('222', tableData.value);
      }
    };
    const changeState = async (state, modelId, selectedRowKeys) => {
      const params = {
        modelId,
        modelIds: selectedRowKeys.toString() || '',
        state,
      };
      const res = await updateYjState(params);
      if (state && res.code && res.code === 200) {
        message.success('下发成功！');
      } else {
        message.info('已忽略！');
      }
      await resultList();
    };
    //跳转详情
    const handleDetail = record => {
      let routeUrl = router.resolve({
        path: '/early-warning/current-alarm/detail',
        query: {
          modelId: record.modelId,
        },
      });
      window.open(routeUrl.href, '_blank');
    };
    onMounted(() => {
      top3List();
      resultList();
    });
    return {
      handleDetail,
      rowKeys,
      xiafa,
      supperSelectChange,
      //data
      tabsList,
      radioGroupList,
      setPeriod,
      setZZType,

      //refs
      radioGroup,
      activeKey,
      methodsName,
      statusSelect,
      statusChange,
      moment,
      historyDateFormat,
      historyDate,
      SHOW_PARENT,
      warningTitleList,
      tableData,
      tableColumns,
      size,
      page,
      total,
      tableLoading,
      spinning,
      zhCN,

      //	methods
      tabsChange,
      setType,
      typesChange,
      dateChange,
      onSearch,
      warnTitleClick,
      setFontSize,
      compareTitle,
      compare,
      timeCycle,
      warnLevelColor,
      onShowSizeChange,
      onChange,
      tagType,
      rowSelection,
      changeState,
    };
  },
});
</script>

<style scoped lang="less">
.early-warning-list {
  .query-box1 {
    position: relative;
    background: #2b2d33;
    border: 1px solid #57617b;
    .tabs-style {
      :deep(.ant-tabs-nav-container) {
        height: 60px;
      }
      :deep(.ant-tabs-tab) {
        height: 60px;
        line-height: 60px;
      }
    }
    :deep(.ant-tabs-bar) {
      margin: 0;
    }
    .radio-group {
      position: absolute;
      top: 14px;
      left: 50%;
      margin-left: -126px;
    }
    .methods-name-box {
      position: absolute;
      top: 14px;
      right: 20px;
      .methods-name {
        width: 300px;
      }
    }
  }
  .query-box2 {
    height: 60px;
    padding: 14px;
    background: #2b2d33;
    border-right: 1px solid #57617b;
    border-left: 1px solid #57617b;
  }
  .query-box3 {
    height: 48px;
    margin-bottom: 20px;
    padding: 8px 0;
    border: 1px solid #57617b;
  }

  .warn-title-box {
    padding: 15px 0;
    border: 2px solid transparent;
    cursor: pointer;
    .warn-title-left,
    .warn-title-right {
      height: 116px;
      padding: 0 16px;
    }
    .warn-title-left {
      float: left;
      width: 150px;
      height: 136px;
      border-right: 1px solid;
      .icon-style {
        display: block;
        width: 50px;
        height: 50px;
      }
      .warn-count {
        display: block;
        overflow: hidden;
        line-height: 74px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .warn-title-right {
      padding-left: 120px;
      .warn-list {
        list-style: none;
        & > li {
          display: flex;
          margin: 20px 0;
          & > * {
            display: inline-block;
            line-height: 20px;
            vertical-align: bottom;
          }
          .jiqiren {
            font-size: 20px;
          }
          .warn-name {
            display: inline-block;
            width: 80%;
            margin: 0 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .warn-type {
            opacity: 0.5;
          }
          .type-style {
            display: inline-block;
            width: 20px;
            height: 20px;
            color: black;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            cursor: default;
          }
        }
      }
    }
  }
  .col-style:nth-child(1):hover .warn-title-box {
    border-color: #ff2b4d;
  }
  .col-style:nth-child(2):hover .warn-title-box {
    border-color: #ff6f1c;
  }
  .col-style:nth-child(3):hover .warn-title-box {
    border-color: #ecd60d;
  }
  .col-style:nth-child(4):hover .warn-title-box {
    border-color: #1cdaff;
  }
  :deep(.m-tag) {
    margin: 0 2px;
  }
  .table-item-xqdw {
    display: inline-flex;
    flex-direction: column;
    padding: 0px 10px;
  }
}
.page-box {
  margin-top: 20px;
  padding: 3px 20px;
  text-align: right;
  background: #2b2d33;
  border: 1px solid #4c546b;
}

:deep(.ant-pagination-total-text) {
  float: left;
}

:deep(.ant-table-bordered .ant-table-tbody > tr > td) {
  padding: 0;
  text-align: center;
}
:deep(.ant-table-bordered .ant-table-tbody > tr > td:nth-child(2)) {
  position: relative;
}
:deep(.level-style) {
  span {
    padding: 0 6px;
    font-weight: 400;
    font-family: Source Han Sans CN;
    vertical-align: middle;
  }
}
.table-content {
  padding: 24px 10px;
  text-align: left !important;
  .triangle {
    position: relative;
    top: -24px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 30px solid;
    border-right: 30px solid transparent;
  }
  .triangleText {
    margin-top: -44px;
    margin-bottom: 10px;
    margin-left: 34px;
    font-size: 16px;
  }

  .triangle::before {
    position: absolute;
    top: -30px;
    left: 2px;
    color: #17235e;
    font-weight: 600;
    font-size: 12px;
    word-break: keep-all;
  }
  & > .tag-ai::before {
    content: 'AI';
  }
  & > .tag-jj::before {
    content: '接';
  }
  & > .tag-fk::before {
    content: '反';
  }
  a {
    text-decoration: underline;
  }
  .red-font {
    color: #ff2b4d;
  }
  .blue-style {
    display: inline-block;
    padding: 2px 6px;
    color: #1673fa;
    font-size: 12px;
    font-style: normal;
    background: rgba(22, 115, 250, 0.3);
  }

  & > .tag-ai {
    border-top-color: #e99220;
  }
  & > .tag-jj {
    border-top-color: #1ccaff;
  }
  & > .tag-fk {
    border-top-color: #3191ff;
  }
}
.btns-box {
  text-align: center;
  :deep(.ant-btn) {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
.tags-box {
  margin-left: 34px;
  .tag-style + .tag-style {
    margin-left: 10px;
  }
  .tag-ai {
    color: #e99220;
    font-size: 12px;
    border: 1px solid #e99220;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #e99220;
    }
  }
  .tag-jj {
    color: #1ccaff;
    font-size: 12px;
    border: 1px solid #1ccaff;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #1ccaff;
    }
  }
  .tag-fk {
    color: #ff2b4d;
    font-size: 12px;
    border: 1px solid #ff2b4d;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #ff2b4d;
    }
  }
  .tag-xq {
    color: #3191ff;
    font-size: 12px;
    border: 1px solid #3191ff;
    & > a {
      display: inline-block;
      width: 16px;
      height: 16px;
      color: #31343d;
      line-height: 16px;
      text-align: center;
      background: #3191ff;
    }
  }
  .tag-ai,
  .tag-jj,
  .tag-fk {
    text-decoration: none !important;
    & > a {
      text-decoration: none !important;
    }
  }
}
.yjhuang {
  padding: 0 3px;
  color: #ecd60d;
  background: rgba(236, 214, 13, 0.2);
}
.yjhong {
  padding: 0 3px;
  color: #ff2b4d;
  background: rgba(255, 43, 77, 0.2);
}
.yjcheng {
  padding: 0 3px;
  color: #ff6f1c;
  background: rgba(255, 111, 28, 0.2);
}
.yjlan {
  padding: 0 3px;
  color: #1cdaff;
  background: rgba(28, 218, 255, 0.2);
}
.imgps {
  height: 14px;
  margin-bottom: 5px;
}
.tags-box + .tags-box {
  margin-top: 4px;
}
.blue-border {
  height: 20px;
  padding: 0 6px;
  color: #1ec0d2;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #1ec0d2;
}
.blue-border + .blue-border {
  margin-top: 10px;
}
.status-box {
  position: relative;
  padding-left: 10px;
  .solid-circle {
    position: absolute;
    top: 8px;
    left: 8px;
    display: block;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
  }
}
</style>
